<template>
  <div>
    <a-card>
      <p class="text-lg font-bold">实时工位</p>

      <a-row :gutter="[16, 16]">
        <a-col :span="4" v-for="(p, index) in parkings" :key="index">
        <a-tooltip>
        <template #title>点击查看历史</template>
          <div
            :class="p.state == '空闲' ? 'card' : 'card-forbidden'"
            @click="toHistory(p)"
          >
            <div class="card-title">
              {{ `${p.parking_type}${p.no}` }}
            </div>
            <div class="empty  text-white">编号{{ p.id }}</div>
            <div>
              <div class="text-white">
                <span v-if="p.state == '空闲'">空闲</span>
                <span v-else>占用</span>
              </div>
            </div>
          </div>
          </a-tooltip>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import Api from "@/api/backend/api";
const router = useRouter();
const parkings = ref([]);
const getParkings = async () => {
  parkings.value = await Api.parkingController.online();
};
getParkings();
const toHistory = (row) => {
  router.push(`/business/ticket/parking/${row.id}/state`);
};
</script>

<style lang="less" scoped>
.card {
  @apply w-24 h-24 bg-blue-500 box-sizing p-2  shadow-md cursor-pointer hover:scale-105  duration-150;
  .card-title {
    @apply text-xl font-bold text-center text-white;
  }

  .empty {
    @apply h-8;
  }
  .card-state {
    @apply text-white text-right;
  }
}
.card-forbidden {
  @apply w-24 h-24 bg-orange-500 box-sizing p-2  shadow-md cursor-pointer hover:scale-105  duration-150;
  .card-title {
    @apply text-xl font-bold text-center text-white;
  }

  .empty {
    @apply h-8;
  }
  .card-state {
    @apply text-white text-right;
  }
}
</style>
